<template>
  <view class="screen-width container">
    <view class="top">
      <view class="label-content flex items-middle space-around">
        <view
          v-for="(item,index) in labelList"
          :key="index"
          :class="currentLabel === index ? 'active' : ''"
          class="label-item"
          @click="changeLabel(item,index)"
        >{{ item.label }}</view>
      </view>
      <view class="fun-btn flex space-between flex-end items-middle">
        <view class="pay-btn" @click="toPayment">缴费</view>
      </view>
    </view>
    <view class="content-list">
      <checkbox-group v-model="checkedList" @change="checkboxChange">
        <view v-for="(item,index) in patentList" :key="index" class="list-item flex items-top">
          <view class="check-box">
            <label>
              <checkbox
                style="transform:scale(0.7)"
                color="#1687ff"
                :value="item.announcementNumber"
                :checked="item.checked"
              />
            </label>
          </view>
          <view class="info-list">
            <view class="name">
              发明
              <text @click="toPatentDetail(item)">{{ item.patentName || '' }}</text>
              <text style="color:red">剩余{{ item.surplusTime }}天到期</text>
            </view>
            <view>费用种类：{{ item.feeType || '' }}</view>
            <view>应缴金额：{{ item.shouldPaymentAmount || '' }}</view>
            <view>截止日期：{{ item.payCloseTime || '' }}</view>
          </view>
        </view>
      </checkbox-group>
      <van-divider v-if="showText || !patentList.length" content-position="center">我也是有底线的</van-divider>
    </view>
    <Festival></Festival>
  </view>
</template>
<script src="./index.js"></script>
<style lang="less" scoped src="./index.less"></style>